<template>
	<view class="content">
		<view class="row">
			<image src="../../static/user_head.png" class="imgSize"></image>
			<MyInput @getInput="getName" class="input" hint="请设置11个字符以内的用户名" max=11 type="text"></MyInput>
		</view>
		<view class="row">
			<image src="../../static/user_head.png" class="imgSize"></image>
			<MyInput @getInput="getPhone" class="input" hint="请输入手机号" max=11 type="number"></MyInput>
		</view>
		<view class="row">
			<image src="../../static/user_head.png" class="imgSize"></image>
			<MyInput @getInput="getPass" class="input" hint="请设置6-16位的密码" max=16 :isPass=isPass></MyInput>
		</view>
		<view class="row">
			<image src="../../static/user_head.png" class="imgSize"></image>
			<MyInput @getInput="getRePass" class="input" hint="请重复密码" max=16 :isPass=isPass></MyInput>
		</view>
		<button class="btnRegister" @click="register">注册</button>
	</view>
</template>

<script>
	import MyInput from "@/components/my-input/my-input.vue"
	export default {
		data() {
			return {
				isPass: true,
				iName: "",
				iPhone: "",
				iPass: "",
				iRePass: ""
			}
		},
		methods: {
			register(){
				var toastMsg = ""
				var vue = this
				if(this.iName==""||this.iPass==""||this.iPhone==""||this.iRePass==""){
					toastMsg = "请不要留空!"
				}else if(this.iPass != this.iRePass){
					toastMsg = "两次输入的密码不一致!"
				}else if(this.iPhone.length != 11){
					toastMsg = "请输入正确的手机号!"
				}else if(this.iPass.length < 6 || this.iPass.length > 16){
					toastMsg = "请输入正确长度的密码!"
				}else{
					uniCloud.callFunction({
						name:"findUserByPhone",
						data:{
							phone:vue.iPhone
						},
						success(res) {
							if(res.result.data.length == 0){
								uniCloud.callFunction({
									name:"registerUser",
									data:{
										name:vue.iName,
										phone:vue.iPhone,
										password:vue.iPass
									},
									success(v) {
										console.log(v)
										toastMsg = "注册成功!"
										console.log("注册成功");
										uni.showToast({
											title:toastMsg,
											icon:"none"
										})
										uni.navigateBack({
											animationDuration:500
										})
									},
									fail(err) {
										toastMsg = "注册失败!"+err
										console.log(err);
										uni.showToast({
											title:toastMsg,
											icon:"none"
										})
									}
								})
							}else{
								toastMsg = "该手机号已被注册!"
								uni.showToast({
									title:toastMsg,
									icon:"none"
								})
							}
						},
						fail(err) {
							console.log("异常!"+err);
						}
					})
				}
				uni.showToast({
					title:toastMsg,
					icon:"none"
				})
			},
			getName(v) {
				this.iName = v
			},
			getPhone(v) {
				this.iPhone = v
			},
			getPass(v) {
				this.iPass = v
			},
			getRePass(v) {
				this.iRePass = v
			},
		},
		components: {
			MyInput
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		align-items: center;
		flex-direction: column;

		.row {
			height: 40px;
			margin-top: 20px;

			.imgSize {
				float: left;
				width: 30px;
				height: 30px;
				margin-top: 10px;
			}

			.input {
				height: 40px;
				float: left;
			}
		}
		.btnRegister{
			margin-top: 30px;
			width: 200px;
		}
	}
</style>
